<template>
  <div class="progressBar">
    <div class="progressTitle" :title="name">{{ name }}</div>
    <div class="progressBarOuter">
      <div class="progressBarInner" :style="'width:' + percentage + '%'"></div>
    </div>
  </div>
</template>
  

<script>
export default {
  props: {
    percentage: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.progressBar {
  width: 100%;
  display: flex;
  align-items: center;
  .progressTitle {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 1.7vh;
    color: #ffffff;
    margin-right: 10px;
    width: 32%;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .progressBarOuter {
    flex: 1;
    height: 15px;
    background-color: transparent;
    .progressBarInner {
      height: 100%;
      background: linear-gradient(90deg, #006aff 0%, #8cbcff 98%);
      opacity: 0.86;
    }
  }
}
</style>
  
  